class Table {
    constructor() {
            this.data = data
            this.addName = this.$('.add-name')
            this.addTitle = this.$('.add-title')
            this.searchName = this.$('.search-name')
            this.searchbtn = this.$('.search-btn')
            this.nodata = this.$('.nodata')
            this.tablebox = this.$('#table')
            this.renderTable(this.mapNewData(this.data))
            this.searchData(this.data)
        }
        //拿取数据
    mapNewData(data) {
            const newData = data.map(obj => {
                return {
                    code: obj.code,
                    productName: obj.productName,
                    timer: obj.timer,
                }
            });
            return newData
        }
        //删除
    renderTable(data) {
            this.table = this.$('.table')
            let tHeadData = data[0]
            this.tHead = this._c('thead')
            let th1 = this._c('th')
            th1.innerText = '编号'
            let th2 = this._c('th')
            th2.innerText = '品牌名称'
            let th3 = this._c('th')
            th3.innerText = '创立时间'
            let th4 = this._c('th')
            th4.innerText = '操作'
            this.tHead.appendChild(th1)
            this.tHead.appendChild(th2)
            this.tHead.appendChild(th3)
            this.tHead.appendChild(th4)
            this.tbody = this._c('tbody')
            for (let i = 0; i < data.length; i++) {
                let tr = this._c('tr')
                for (let j in data[i]) {
                    let td = this._c('td')
                    td.innerText = data[i][j]
                    tr.appendChild(td)
                }
                let td = this._c('td')
                let button = this._c('button')
                button.onclick = () => {
                    let flag = confirm('确定要删除吗')
                    if (flag) {
                        var index = button.getAttribute('index')
                        this.data.splice(index, 1)
                        this.renderTable(this.mapNewData(this.data))
                    } else {
                        alert('好嘞')
                    }
                }
                button.innerText = '删除'
                button.setAttribute('index', i)
                td.appendChild(button)
                tr.appendChild(td)
                this.tbody.appendChild(tr)
            }
            this.table = this._c('table')
            this.table.appendChild(this.tHead)
            this.table.appendChild(this.tbody)
            this.tablebox.appendChild(this.table)
            this.tablebox.innerHTML = ''
            this.tablebox.appendChild(this.table)
            if (this.tbody.children.length == 0) {
                this.nodata.style.display = 'block'
            }
        }
        //添加
    addOneData() {
        this.addBtn = this.$('.add-btn')
        console.dir(this.addBtn);
        this.addBtn.onclick = (e) => {
                e.preventDefault();
                let codes = this.data[this.data.length - 1].id + 1
                let obj = {
                    code: this.addName.value,
                    productName: this.addTitle.value,
                    timer: new Date().toLocaleTimeString(),
                }
                this.data.push(obj);
                this.renderTable(this.mapNewData(this.data))
                this.addName.value = ''
                this.addTitle.value = ''
            }
            //回车键添加数据
        this.addName.onkeydown = (e) => {
            e = e || window.event;
            let keycode = e.keycode || e.which
            if (keycode === 13) {
                let codes = this.data[this.data.length - 1].id + 1
                let obj = {
                    code: this.addName.value,
                    productName: this.addTitle.value,
                    timer: new Date().toLocaleTimeString(),
                }
                this.data.push(obj);
                this.renderTable(this.mapNewData(this.data))
            }
        }
        this.addName.oninput = () => {
            let reg = /^\d{1,5}$/
            console.log(this.addName.value);
            if (this.addName.value == '') {
                this.addBtn.disabled = true;
                // console.log(123);
                return
            }
            if (reg.test(this.addName.value)) {
                this.addBtn.disabled = false;
            } else {
                this.addBtn.disabled = true;
            }
        }
    }

    //搜索
    searchData(data) {
        var unicode = 0
        this.searchName.oninput = () => {
            // if (this.searchName.value != '') {
            //     this.searchbtn.disabled = false
            // }
            console.log(this.searchName.value);
            let searcharr = []
            for (let i = 0; i < data.length; i++) {
                searcharr.push(this.data[i].productName)
                let index = searcharr[i].indexOf(this.searchName.value)
                if (index != -1) {
                    unicode = i
                }
            }

        }
    }
    mapNewData(data) {
        const newData = data.map(obj => {
            return {
                code: obj.code,
                productName: obj.productName,
                timer: obj.timer,
            }
        });
        return newData
    }
    $ = selector => document.querySelector(selector)
    _c = tagName => document.createElement(tagName)
}
let data = [{
        id: 1,
        code: 1,
        productName: "品如的衣柜",
        timer: new Date().toLocaleTimeString()
    },
    {
        id: 2,
        code: 2,
        productName: "蔡徐坤的篮球",
        timer: new Date().toLocaleTimeString()
    },
    {
        id: 3,
        code: 3,
        productName: "关羽的马",
        timer: new Date().toLocaleTimeString()
    },
]
let c = new Table()
c.addOneData()